﻿{extend name="layout" /}
{block name="css"}
<link rel="stylesheet" href="artisan_plugins/bootstrap3-editable/css/bootstrap-editable.css">
<link href="artisan_plugins/DataTables/css/data-table.css" rel="stylesheet"/>
<link rel="stylesheet" href="artisan_plugins/bootstrap-datepicker/css/datepicker3.css">
<style>
    table > thead > tr > th {
        text-align: center;
        vertical-align: middle;
    }
</style>
{/block}

{block name="content"}
<!--主窗体start-->
<div id="content" class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="{:url('Admin/Index/index')}">首页</a></li>
        <li><a href="javascript:;">历史查询</a></li>
        <li class="active">查询</li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">历史查询
        <small>header small text goes here...</small>
    </h1>
    <!-- end page-header -->
    <!--表格start-->
    <div class="panel panel-inverse">
        <div class="panel-heading">
            <div class="panel-heading-btn">
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i
                        class="fa fa-expand"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i
                        class="fa fa-repeat"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i
                        class="fa fa-minus"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i
                        class="fa fa-times"></i></a>
            </div>
            <h4 class="panel-title">已定义电气回路</h4>
        </div>
        <div class="panel-body">
            <div class="row" id="toolbar">
                <div class="form-inline" role="form">
                    <div class="input-group">
                        <span class="input-group-addon">车间: </span>
                        <select class="form-control" name="shop"></select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">工段: </span>
                        <select class="form-control" name="part"></select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">电气室: </span>
                        <select class="form-control" name="room"></select>
                    </div>
                    <div class="input-group input-daterange">
                        <input type="text" class="form-control" name="start" placeholder="起始时间">
                        <span class="input-group-addon">to</span>
                        <input type="text" class="form-control" name="end" placeholder="结束时间">
                    </div>
                    <button id="ok" type="submit" class="btn btn-default">筛选</button>
                </div>
            </div>
            <div class="table-responsive">
                <table id="history-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <table id="tb_departments"></table>
    <!--表格end-->
    <!--图表start-->
    <div class="panel panel-inverse" data-sortable-id="index-2">
        <div class="panel-heading">
            <div class="panel-heading-btn">
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                   data-click="panel-expand"><i class="fa fa-expand"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                   data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                   data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                   data-click="panel-remove"><i class="fa fa-times"></i></a>
            </div>
            <h4 class="panel-title">地区信息</h4>
        </div>
        <div class="panel-body">
            <div id="chart" style="height: 400px"></div>
        </div>
    </div>

    <!--图表end-->
</div>
<!--主窗体end-->
{/block}

{block name="script"}
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="artisan_plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="artisan_plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>

<script src="artisan_plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="artisan_js/echarts.min.js"></script>
<script src="artisan_js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
    $(document).ready(function () {
        // App.init();
        //图表
        $(function () {
            var date = new Date();
            var data = [
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]},
                {value: [Math.random(), Math.random()]}
            ];
            var convertData = function (data) {
                var res1 = [];
                var res2 = [];
                for (var i = 0; i < data.length; i++) {
                    res1.push({
                        value: data[i].value[0]
                    });
                    res2.push({
                        value: data[i].value[1]
                    });
                }
                return [res1, res2];
            };

            var historyChart = echarts.init(document.getElementById('chart'));

// 指定图表的配置项和数据
            var option = {
                title: {
                    text: '历史折线图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
//            bottom: '15%',
                    containLabel: false
                },
                legend: {
                    data: ['剩余电流', '温度']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: (function () {
                        var now = new Date();
                        var res = [];
                        var len = data.length;
                        while (len--) {
                            res.unshift(now.getHours() + ':' + now.getMinutes());
                            now = new Date(now - 60000);
                        }
                        return res;
                    })()
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                    name: '剩余电流',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: convertData(data)[0]
                }, {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: convertData(data)[1]
                }]
            };

// 使用刚指定的配置项和数据显示图表。
            historyChart.setOption(option);
        });
        //表格
        $(function () {
            var dataSet = function () {
                $.ajax({
                    type: 'post',
                    url: "/admin/history/searchHistory",
                    data: {},
                    timeout: 5000,
                    success: function (data) {
                        var html = "<tr><th></th>";
                        var title = [{'data': 'time', 'title': '查询时段'}];
                        for (item in data[0]) {
                            html += "<th colspan='2'>" + item + "</th>";
                            for (item1 in data[0][item]) {
                                title.push(data[0][item][item1]);
                            }
                        }
                        html += "</tr>";
                        var table = $('#history-table').dataTable({
                            //dom: 'T<"clear">lfrtip',
                            //tableTools: {
                            //    "sSwfPath": "artisan_plugins/DataTables/swf/copy_csv_xls_pdf.swf"
                            //},
                            bLengthChange: false,
                            data: data[1],
                            pageLength: 10,     //每页显示十条数据
                            columns: title,
                            columnDefs: [{
                                "targets": "_all",
                                "defaultContent": ""
                            }],
                            "initComplete": function (settings, json) {
                                $('#history-table thead tr').eq(0).before(html);
                            }
                        });
                    }
                });
            };
            dataSet();
        });
        $('.input-daterange').datepicker({
            todayHighlight: true,
            language:'zh-CN'
        });
    });
</script>
{/block}